<template>
  <div class="VolunteerContainer">
    <router-link to="/home"><div class="goBack">←</div></router-link>
    <div class="volunteer_title">
      <div class="titleInformation"><h2>完善高考志愿填报信息</h2></div>
      <div class="titleApplyment">输入高考成绩信息,获得精准志愿推荐</div>
    </div>
    <div class="userCharacters">
      <h4>你的角色</h4>
      <div class="characters">
        <div class="character">学生</div>
        <!-- <div class="character">家长</div>
        <div class="character">老师</div> -->
      </div>
    </div>
    <div class="volunteerProvince">
      <span>高考省份</span>
      <select v-model="usrData.provence">
        <template v-for="(item, index) in sheng">
          <option :value="item" :key="index">
            {{ item }}
          </option>
        </template>
      </select>
    </div>
    <hr />
    <div class="volunteerSubject">
      <span>选择科目</span>
      <select name="" id="" v-model="usrData.subjectType">
        <option value="理科" selected>理科</option>
        <option value="文科">文科</option>
      </select>
    </div>
    <hr />
    <div class="testGrade">
      <span>高考成绩</span>
      <input
        type="text"
        name=""
        id=""
        :disabled="isDisabled"
        v-model="usrData.score"
      />
      <!-- <span><button @click="changeEdit">编辑</button></span> -->
    </div>
    <hr />
    <div class="gradeRanking">
      <span>高考排名</span>
      <input
        type="text"
        name=""
        id=""
        :disabled="isDisabled"
        v-model="usrData.rate"
      />
      <!-- <span><button @click="changeEdit">编辑</button></span> -->
    </div>
    <hr />
    <div class="volunteerTips">
      <span class="redText">* </span>
      <span>2023吉林高考一分一段：631分 1~104名</span>
    </div>
    <button class="finish" @click="submit">保存</button>
    <div class="footer">
      <ul>
        <li>
          ·
          以上数据仅用于夸克提供志愿填报功能相关的服务，未经您的授权不会用作其他用途
        </li>
        <li>
          ·
          夸克高考仅支持普通类常规批次考生，暂不支持艺体生、提前批等特殊批次考生
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Predictive } from "@/api/allApi";

export default {
  name: "ImproveVolunteeringInformation",
  data() {
    return {
      isDisabled: false,
      sheng: [
        "北京市",
        "天津市",
        "上海市",
        "重庆市",
        "河北省",
        "山西省",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "海南省",
        "四川省",
        "贵州省",
        "云南省",
        "陕西省",
        "甘肃省",
        "青海省",
        "台湾省",
        "内蒙古自治区",
        "广西壮族自治区",
        "西藏自治区",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "香港特别行政区",
        "澳门特别行政区",
      ],
      usrData: {
        provence: "吉林省",
        subjectType: "理科",
        score: "590",
        rate: "3006",
      },
    };
  },
  methods: {
    changeEdit() {
      this.isDisabled = false;

    },

    async submit() {
      // let res=await Predictive({score:this.usrData.score})
      // console.log(res.data);
      // window.localStorage.setItem("predit", JSON.stringify(res.data));
      // window.localStorage.setItem("useData", JSON.stringify(this.usrData));
      this.$router.push({path:"/home"})
    },
  },
};
</script>


<style lang="less" scoped>
.VolunteerContainer {
  width: 370px;
  height: 667px;
  display: flex;
  flex-direction: column;
  background-color: white;
}
.goBack {
  width: 375px;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
}
.volunteer_title {
  width: 375px;
  height: 80px;
  padding-left: 20px;
}
.volunteer_title .titleInformation {
  width: 375px;
  height: 50px;
  line-height: 50px;
  letter-spacing: 4px;
  font-size: 14px;
}
.volunteer_title .titleApplyment {
  width: 375px;
  height: 20px;
  line-height: 20px;
  color: gray;
  letter-spacing: 1px;
}
.userCharacters {
  width: 375px;
  height: 120px;
  line-height: 60px;
  letter-spacing: 2px;
}
.userCharacters h4 {
  font-size: 16px;
  padding-left: 20px;
}
.userCharacters .characters {
  width: 375px;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
}
.userCharacters .characters .character {
  width: 110px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  text-align: center;
  letter-spacing: 5px;
  background-color: rgb(55, 151, 241);
  font-size: 14px;
  color: aliceblue;
}
.volunteerProvince {
  width: 375px;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
}
.volunteerProvince span {
  font-weight: 550;
  font-size: 14px;
  letter-spacing: 2px;
}
.volunteerSubject {
  width: 375px;
  height: 60px;
  padding-left: 20px;
  line-height: 60px;
}
.volunteerSubject span {
  font-weight: 550;
  font-size: 14px;
  letter-spacing: 2px;
}
.testGrade {
  width: 375px;
  height: 60px;
  padding-left: 16px;
  line-height: 60px;
}
.testGrade span {
  font-weight: 550;
  font-size: 14px;
  letter-spacing: 2px;
}
.gradeRanking {
  width: 375px;
  height: 60px;
  padding-left: 16px;
  line-height: 60px;
}
.gradeRanking span {
  font-weight: 550;
  font-size: 14px;
  letter-spacing: 2px;
}
.gradeRanking .icont {
  font-size: 12px;
}
.volunteerTips {
  width: 375px;
  height: 20px;
  padding-left: 20px;
}
.volunteerTips .redText {
  color: red;
}
.volunteerTips span {
  color: gray;
  font-size: 12px;
}
.finish {
  background-color: rgb(9, 74, 247);
  border: none;
  border-radius: 10px;
  color: white;
  width: 350px;
  height: 50px;
  margin-left: 12.5px;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.footer {
  width: 375px;
  height: 80px;
  font-size: 12px;
  color: gray;
  padding-left: 20px;
  background-color: rgb(246, 245, 245);
}
select {
  border: none;
  font-size: 16px;
  width: 230px;
  margin-left: 20px;
  border: none;
  outline: none;
}
input {
  outline: none;
  margin-left: 20px;
  width: 200px;
  border: none;
  font-size: 16px;
  padding: 5px;
  background-color: white;
}
button {
  margin-left: 10px;
}
</style>